<template>
    <div class="role-view">
        <page-header pageTitle="管理角色" :hasBackBtn="false"></page-header>
        <el-button type="primary" plain @click="addRole">
            <span class="content fa fa-plus fa-2x"></span>
        </el-button>
        <el-row class="role-view-content">
            <el-col v-for="(role, index) in roles" :key="index" class="role-box">
                <el-card class="role-card">
                    <el-row class="content">
                        <el-col :span="14">
                            <div>{{role.name}}</div>
                        </el-col>
                        <el-col :span="10" class="btn-group">
                            <el-button icon="el-icon-s-tools" type="primary" plain circle size="mini"
                                       @click="toRoleDetail(role)"></el-button>
                            <el-button icon="el-icon-close" type="danger" plain size="mini" circle
                                @click="deleteRole(role)"></el-button>
                        </el-col>
                    </el-row>
                </el-card>
            </el-col>
        </el-row>

        <el-dialog
                :title="dialogTitle"
                :visible.sync="roleDialogVisible"
                width="40%">
            <div class="role-role-setting-view">
                <el-form>
                    <el-form-item label="角色">
                        <el-input v-model="curRole.name"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="roleDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveRole">确 定</el-button>
            </span>
        </el-dialog>

    </div>
</template>
<script>
    export default {
        name: 'Role',
        components: {
            PageHeader: () => import("@/views/common/PageHeader.vue")
        },
        data() {
            return {
                roleDialogVisible: false,
                curRole: {
                    id: '',
                    name: ''
                },
                roles: [/*{
                    id: '',
                    name: '角色1',
                }*/],
                isAdd: true,
            }
        },
        computed: {
            dialogTitle(){
                if(this.isAdd){
                    return '添加角色';
                }else{
                    return '角色详情';
                }
            }
        },
        created: function() {
          this.loadRoles();
        },
        methods: {
            loadRoles(){
                let self = this;
                let url = '/api/role/get_list';
                this.$http.post(url, {}).then(res => {
                    self.roles = res.data.roles;
                }).catch(err => {
                    console.log(err);
                });
            },
            toRoleDetail: function(role) {
                this.isAdd = false;
                this.curRole = role;
                this.roleDialogVisible = true;
            },
            deleteRole: function(role) {
                let url = '/api/role/delete';
                this.$http.post(url, {
                    name: role.id
                }).then(res => {
                }).catch(err => {
                    console.log(err);
                });            },
            addRole: function () {
                this.isAdd = true;
                this.roleDialogVisible = true;
            },
            saveRole: function () {
                let self = this;
                if(this.isAdd){
                    let url = '/api/role/add';
                    this.$http.post(url, {
                        name: self.curRole.name
                    }).then(res => {
                        self.roleDialogVisible = false;
                        self.loadRoles();
                    }).catch(err => {
                        console.log(err);
                    });
                }else{
                    let url = '/api/role/update';
                    this.$http.post(url, {
                        id: self.curRole.id,
                        name: self.curRole.name
                    }).then(res => {
                        self.loadRoles();
                        self.roleDialogVisible = false;
                    }).catch(err => {
                        console.log(err);
                    });
                }
            }
        }
    }
</script>
<style lang="scss" scoped>
    .role-view {
        width: 100%;

        .role-view-content {
            margin: 0.1rem 0.2rem;
            overflow: auto;

            .role-box {
                margin: 0.1rem;
                width: 2.2rem;
                text-align: center;
                border-radius: 0.1rem;

                .role-card {
                    width: 2rem;
                    text-align: left;
                }
                .content {
                    height: 100%;

                    .btn-group {
                        display: flex;
                        flex-direction: row;
                    }
                }
            }
        }
    }
</style>
